<div class="wrap">
    <div class="row">
        <!--重复部分-->
        <div ng-repeat="item in vedioData" class="col-xs-12 col-sm-6 col-md-3" style="box-sizing:border-box;margin-bottom: 10px">
            <div class="thumbnail ved-box" ng-click="jump('/detailVedio/'+item.fileId)">
                <div class="ved-con">
                    <img class="ved-conPic" src="{{item.picSmall||item.picMiddle||item.picBig || '../../static/images/video.jpg'}}">
                    <div class="vedioLoadingImg"><img src="static/images/22.png"></div>
                    <div class="positionTime">{{item.duration | durationTime}}</div>
                </div>

                <div class="ved-desc">
                    <h4 ng-click="jump('/detailVedio/'+item.fileId)">{{item.title}}</h4>
                    <p><span>{{item.source}}</span><span>{{item.publishtime|fomatTime}}</span></p>
                </div>
            </div>
        </div>
    </div>
    <!--加载更多-->
    <div ng-show="loadMoreButtonOne" style="margin:0.3rem">
        <button class="btn" ng-click="loadMore(currentPageId,columnStyle)" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff">加载更多</button>
    </div>
    <!--没有更多数据-->
    <div ng-show="noLoadMoreButton" style="margin:0.3rem">
        <button disabled class="btn" style=" background: #FCA204;padding:0.1rem 0.2rem;margin: 0 auto;display: block;color: #ffffff">没有更多数据</button>
    </div>
</div>

<style>
    .positionTime{
        position: absolute;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0 ,0.4);
        font-size: 0.14rem;
        padding: 2px 5px;
        bottom: 0.06rem;
        right: 0.06rem;
        border-radius: 4px;
    }

    .ved-con{
        position: relative;
        width: 100%;
        height: 160px;
        overflow: hidden;
        background: #eee;
        /*height: 110px;*/
        /*padding: 0.12rem 0.08rem;*/
    }
    .ved-con img{
        width: 100%;
        height: 100%;
    }
    .cont-img-mod{
        position: absolute;
        border-radius: 10px;
        bottom: 0;
        right: 0;
        width: 46px;
        height: 24px;
        overflow: hidden;
    }
    .cont-img-mod-text,.cont-img-mod-bg{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
    }
    .cont-img-mod-text{
        text-align: center;
        color: #fff;
        z-index: 10;
    }
    .cont-img-mod-bg{
        z-index: 1;
        background: #000;
        opacity: 0.6;
        filter:alpha(opacity=60);
        -moz-opacity:0.6;
        -khtml-opacity: 0.6;
    }
    .ved-desc{
        /*height: 110px;*/
        padding: 0.10rem 0.08rem;
    }
    .ved-desc h4{
        height: 0.48rem;
        margin: 10px 0;
        font-size: 0.15rem;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        /* height: 17px; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ved-desc p{
        font-size: 0.14rem;
        color: #999999;
    }

    .ved-desc p span{
        margin-right:10px;
    }
    .vedioLoadingImg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform:translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
    }
    .vedioLoadingImg img{
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform:scale(0.5);
        -o-transform: scale(0.5);
    }
    .ved-box{
        cursor: pointer;
    }
    /*动画效果添加*/
    .ved-box img{
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .ved-box:hover .ved-conPic{
        transform: scale(1.1);
    }
    .ved-box:hover h4{
        animation: flash 0.5s ease-in-out;
    }


</style>